<template>
	<view class="list-small">
		<view class="scrollx_items"
			 v-for="(category,index) in initialCategories"  :key="index" 
			 :class="{'active': index === curIndex}" 
			 role="button"
			 @click="handleSelect(index)">
			<text>{{category}}</text>
		</view>
	</view>
</template>

<script>
	export default{
		emits:['selectCategory'],
		props:['categories'],
		data(){
			return {
				curIndex:0,
				initialCategories:[]
			}
		},
		watch:{
			categories(newVal,oldVal){
				this.initialCategories = ["离你最近",...this.categories]
			},
			deep:true
		},
		methods:{
			handleSelect(index){
				this.curIndex = index
				this.$emit('selectCategory',this.initialCategories[index])
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-small{
		width: 100%;
		padding:2px 0px;
		display: flex;
		gap:12px;
		align-items: center;
		overflow-x: scroll;
		
		.scrollx_items{	
			border-radius: 10px;
			border: 1px solid #333;
			padding: 6px 8px;
			flex-shrink: 0;		
			&.active{
				background-color: #333;
				color: #fff;
			}
		}
	}
</style>